<!-- Modal -->
<a
  data-bs-toggle="modal"
  ng-if="showLink"
  data-bs-target="#dlg-portal-theme-settings"
  class="btn-link"
>
  Show Settings
</a>
<div
  class="modal fade"
  id="dlg-portal-theme-settings"
  role="dialog"
  aria-hidden="true"
>
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3>Theme Settings</h3>
      </div>
      <div class="modal-body">
        <div class="card mb-4">
          <div class="card-body">
            <div class="mb-3">
              <label class="customRange">Primary Color Hue</label>
              <!-- <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.primaryColorHue}}"
                                ng-model="$ctrl.portalThemeSettings.primaryColorHue"> -->
              <input
                type="range"
                min="0"
                max="360"
                step="1"
                class="custom-range"
                ng-change="$ctrl.applyThemeSettings()"
                value="{{$ctrl.portalThemeSettings.primaryColorHue| number: 0}}"
                ng-model="$ctrl.portalThemeSettings.primaryColorHue"
              />
            </div>
            <div class="mb-3">
              <label class="">Primary Color Saturation</label>
              <!-- <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.primaryColorSaturation}}"
                                ng-model="$ctrl.portalThemeSettings.primaryColorSaturation"> -->
              <input
                type="range"
                min="0"
                max="100"
                value="100%"
                step="1"
                class="custom-range"
                ng-change="$ctrl.applyThemeSettings()"
                value="{{$ctrl.portalThemeSettings.primaryColorSaturation| number: 0}}"
                ng-model="$ctrl.portalThemeSettings.primaryColorSaturation"
              />
            </div>
            <div class="mb-3">
              <label class="">Primary Color Brightness</label>
              <!-- <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.primaryColorBrightness}}"
                                ng-model="$ctrl.portalThemeSettings.primaryColorBrightness"> -->
              <input
                type="range"
                min="0"
                max="100"
                value="50"
                step="1"
                class="custom-range"
                ng-change="$ctrl.applyThemeSettings()"
                value="{{$ctrl.portalThemeSettings.primaryColorBrightness}}"
                ng-model="$ctrl.portalThemeSettings.primaryColorBrightness"
              />
            </div>
            <div class="mb-3">
              <label class="col-4">Background Color</label>
              <input
                type="color"
                ng-change="$ctrl.applyThemeSettings()"
                value="{{$ctrl.portalThemeSettings.bgColor}}"
                ng-model="$ctrl.portalThemeSettings.bgColor"
              />
              <input
                type="text"
                class="form-control-sm"
                ng-model="$ctrl.portalThemeSettings.bgColor"
              />
            </div>
            <div class="mb-3">
              <label class="col-4">Text Color</label>
              <input
                type="color"
                ng-change="$ctrl.applyThemeSettings()"
                value="{{$ctrl.portalThemeSettings.textColor}}"
                ng-model="$ctrl.portalThemeSettings.textColor"
              />
              <input
                type="text"
                class="form-control-sm"
                ng-model="$ctrl.portalThemeSettings.textColor"
              />
            </div>
            <!-- <div class="mb-3">
                            <label class="col-4">Background Color Hover</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.bgColorHover}}"
                                ng-model="$ctrl.portalThemeSettings.bgColorHover">
                            <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.bgColorHover"/>
                        </div>                        
                        <div class="mb-3">
                            <label class="col-4">Border Color</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.borderColor}}"
                                ng-model="$ctrl.portalThemeSettings.borderColor">
                            <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.borderColor"/>
                        </div>                        
                        <div class="mb-3">
                            <label class="col-4">Border Color Hover</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.borderColorHover}}"
                                ng-model="$ctrl.portalThemeSettings.borderColorHover">
                                <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.borderColorHover"/>
                        </div>                        
                        <div class="mb-3">
                            <label class="col-4">Text Color</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.textColor}}"
                                ng-model="$ctrl.portalThemeSettings.textColor">
                                <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.textColor"/>
                        </div>                        
                        <div class="mb-3">
                            <label class="col-4">Text Color Hover</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.textColorHover}}"
                                ng-model="$ctrl.portalThemeSettings.textColorHover">
                                <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.textColorHover"/>
                        </div>                        
                        <div class="mb-3">
                            <label class="col-4">Link Color</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.linkColor}}"
                                ng-model="$ctrl.portalThemeSettings.linkColor">
                                <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.linkColor"/>
                        </div>                        
                        <div class="mb-3">
                            <label class="col-4">Link Color Hover</label>
                            <input type="color" ng-change="$ctrl.applyThemeSettings()"
                                value="{{$ctrl.portalThemeSettings.linkColorHover}}"
                                ng-model="$ctrl.portalThemeSettings.linkColorHover">
                                <input type="text" class="form-control-sm" ng-model="$ctrl.portalThemeSettings.linkColorHover"/>
                        </div>                         -->
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Cancel
        </button>
        <button
          type="button"
          class="btn btn-primary"
          ng-click="$ctrl.saveThemeSettings()"
          data-bs-dismiss="modal"
        >
          Save
        </button>
      </div>
    </div>
  </div>
</div>
